<template>
<div>
    <h2>v-model的双向绑定功能</h2>
    <h3>这里可以同步显示input的内容>> <span class="inputs">{{name}}</span> </h3>
    <input type="text" v-model="name" placeholder="你的名字">
    <button @click="clickadd()">在组件中改变input的内容</button>
    <hr>
    <h2>现在时间:{{ nowdate   }}</h2>

</div>
    
</template>

<script>
//引入公共函数
import padate from "../utils/util.js";
export default {
  data() {
    return {
      name: "",
      nowdate: new Date()
    };
  },
  filters: {
    formatDate(value) {
      var date = new Date(value);
      var year = date.getFullYear();
      var month = padate(date.getMonth() + 1);
      var day = padate(date.getDate());
      var hours = padate(date.getHours());
      var minutes = padate(date.getMinutes());
      var seconds = padate(date.getSeconds());
      return (
        year +
        "-" +
        month +
        "-" +
        day +
        " " +
        hours +
        ":" +
        minutes +
        ":" +
        seconds
      );
    }
  },
  methods: {
    clickadd() {
      this.name = "我刚刚改变了input的内容";
    }
  }
};
</script>

<style scoped>
.inputs {
  color: cornflowerblue;
}
</style>

